<html>
  <head>
  <title></title>
  <style>
  
    button { transition:none; }
  
    div#content 
    {
      overflow:auto;
      size:*;
      background:radial-gradient(100% 100%, ellipse farthest-side, orange, gold 25%, white);
      //border:3px solid brown;
      border-spacing:10px;
      flow:vertical;
    }
    
    div#content > p { margin:0; width:200px; }
      
  
  </style>
  <script type="text/tiscript">
  
   
    var content = $(div#content);
    var i = 0;

    var transitionParams = 
    {
      ease: "cubic-in-out",
      duration: 800ms,
      effect: "blend",
      direction: "forward"
    }
      
    event click $(button[name=at])
    {
      transitionParams.effect = this.text;
    }
    
    event click $(button#generate)
    {
      function randomColor() { return String.printf("#%02x%02x%02x",rand(256),rand(256),rand(256)); }
      function updater() // updater will clear content and generate 
                         // random paragraphs using random layout manager
      {
        content.clear();
        content.style#flow = ["vertical", "horizontal-flow"][++i & 1]; //rand(2)
        
        for(var i = 0; i < 10 + rand(40); ++i )
          content.$append(<p style="background:{randomColor()}">Item #{i}</p>);
      }
      content.update(updater, transitionParams); // "transactioned" update using worker function    
    }
   
  </script>
  </head>
<body>

  <h2>Element.update(stateChanger) + transition:***</h2>

  <div>
    Transition effect:
    <button|radio name=at>blend</button>
    <button|radio name=at>blend-atop</button>
    <button|radio name=at>slide-top</button>
    <button|radio name=at>slide-bottom</button>
    <button|radio name=at>slide-left</button>
    <button|radio name=at>slide-right</button>
    <button|radio name=at>scroll-top</button>
    <button|radio name=at>scroll-bottom</button>
    <button|radio name=at>scroll-left</button>
    <button|radio name=at>scroll-right</button>
  </div>

  <div>
        <button #generate>Change content</button>
  </div>
  
  <div #content>
    This is an initial content. Select one of effects and click on "Change content" button to generate different contents of the element.
  </div>
  
</body>
</html>
